<script lang="ts" setup>
import { QForm, QTable, type FormItemRows, type TableColums } from '@meetjs/element-plus-kit'
import { getAuditList } from '@/api/interface/audit/index'
import EditDialog from './components/EditDialog.vue'
import type { AuditList, QueryParams } from '@/api/interface/audit/type.ts'

const approvalStatus = ref<
	{
		label: string
		value: number
		type: 'primary' | 'success' | 'danger'
	}[]
>([
	{
		label: '待审批',
		value: 0,
		type: 'primary'
	},
	{
		label: '已通过',
		value: 1,
		type: 'success'
	},
	{
		label: '已驳回',
		value: 2,
		type: 'danger'
	}
])

// form
const formValue = ref<QueryParams>({
	name: '',
	businessSystemName: '',
	applyBusinessSystemName: '',
	approvalStatus: ''
})
const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '接口名称',
		prop: 'name'
	},
	{
		type: 'input',
		label: '提供方业务系统',
		prop: 'businessSystemName'
	},
	{
		type: 'input',
		label: '调用方业务系统',
		prop: 'applyBusinessSystemName'
	},
	{
		type: 'select',
		label: '审批状态',
		prop: 'approvalStatus',
		options: approvalStatus.value,
		attrs: {
			style: 'width: 200px'
		}
	}
])

// table
const loading = ref(false)
const page = ref({
	currentPage: 1,
	pageSize: 10,
	total: 0
})
const tableData = ref<AuditList[]>([])
const columns = ref<TableColums[]>([
	{
		type: 'index',
		label: '序号',
		align: 'center',
		width: 60
	},
	{
		label: '审批单号',
		prop: 'approvalNo'
	},
	{
		label: '接口名称',
		prop: 'interfaceName'
	},
	{
		label: '提供方业务系统',
		prop: 'businessSystemName'
	},
	{
		label: '申请人',
		prop: 'approverName'
	},
	{
		label: '申请时间',
		prop: 'applyTime'
	},
	{
		label: '申请理由',
		prop: 'applyReason'
	},
	{
		label: '调用方业务系统',
		prop: 'applyBusinessSystemName'
	},
	{
		label: '审批状态',
		prop: 'approvalStatus',
		align: 'center',
		type: 'slot'
	},
	{
		label: '审批时间',
		prop: 'approvalTime'
	},
	{
		prop: 'action',
		fixed: 'right',
		label: '操作',
		width: 120,
		align: 'center'
	}
])

// dialog
const editDialogRef = useTemplateRef('editDialogRef')

const getTableData = async () => {
	try {
		loading.value = true
		const res = await getAuditList({
			pageNum: page.value.currentPage,
			pageSize: page.value.pageSize,
			...formValue.value
		})
		tableData.value = res.data.rows
		page.value.total = res.data.total
	} finally {
		loading.value = false
	}
}

const handleDetail = (row: AuditList) => {
	editDialogRef.value?.init(row)
}

onMounted(() => {
	getTableData()
})
</script>

<template>
	<div class="table-page-box">
		<div class="filter-box">
			<QForm
				inline
				:model="formValue"
				:form-options="formOptions"
				:buttons="['search', 'reset']"
				@search="getTableData"
				@reset="getTableData"
			/>
		</div>
		<div class="table-box">
			<QTable
				:data="tableData"
				:columns="columns"
				:page="page"
				:loading="loading"
				style="width: 100%"
				@pageChange="getTableData"
			>
				<template #action="{ row }">
					<el-button
						type="primary"
						link
						@click="handleDetail(row)"
					>
						详情
					</el-button>
				</template>
				<template #approvalStatus="{ row }">
					<el-tag :type="approvalStatus.find(item => item.value === row.approvalStatus)?.type">
						{{ approvalStatus.find(item => item.value === row.approvalStatus)?.label }}
					</el-tag>
				</template>
			</QTable>
		</div>
		<EditDialog
			ref="editDialogRef"
			:approval-status="approvalStatus"
		/>
	</div>
</template>
